<template>
  <div class="data-analy-box">
    <div style="padding:5px" class="user-table search-box">
      <ak-table
        :tableData="tableData.length > 0 ? tableData[pageNum - 1] : []"
        :labelObj="wordLabel"
        :addList="wordAdd"
        :checkedIdAttr="'typeId'"
        :checkedId="userLineId"
        :agencyAttrList="['name']"
        @changeCId="changeCId"
      >
      </ak-table>

      <div class="pagination-container">
        <el-pagination
          :hide-on-single-page="true"
          background
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          align="right"
          :pager-count="5"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 伪分页 需求
import AkTable from '@/components/gisPageComponents/table'
import { mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')

export default {
  name: 'searchWord',
  components: { AkTable },
  data: () => ({
    wordLabel: {
      name: '内容',
      typeName: '类型'
    },
    wordAdd: ['name', 'typeName'],

    pageSize: 10,
    total: 1,
    pageNum: 1,

    tableData: []
  }),
  computed: {
    ...mapState(['gisForm']),
    ...mapStateForm([
      'userLineId', //选中的id，
      'searchWordList' // 搜索词列表
    ])
  },

  watch: {
    searchWordList(nv) {
      // console.log(nv);
      this.initTableData()
    },
    userLineId(nv) {
      if (nv && this.gisForm.keyWord) {
        // this.jumpPage(nv)
      }
    }
  },
  created() {
    // 初始化加载列表
    this.initTableData()
  },
  methods: {
    ...mapMutationsForm(['setUserLineId']),
    // 初始化
    initTableData() {
      let allList = this.searchWordList
      this.total = allList.length
      let tableData = this.group(allList, this.pageSize)
      this.tableData = tableData
      // console.log( tableData );
    },
    // 把一个数组拆成分页数组
    group(array, subGroupLength) {
      let index = 0
      let newArray = []
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)))
      }
      return newArray
    },

    // 跳转到当前选中id 页
    jumpPage(cId) {
      // 查找当前页 列表是否存在 cId
      if (this.tableData.length > 0) {
        let findList = this.tableData[this.pageNum - 1]
        let checkIdAttr = 'typeId'
        let checkItem = findList.find(v => v[checkIdAttr] == cId)
        if (checkItem === undefined) {
          // 查找总列表
          let page = this.pageNum
          let allList = this.searchWordList
          let currentIndex = allList.findIndex(v => v[checkIdAttr] == cId)
          if (currentIndex !== -1) {
            page = Math.ceil((currentIndex + 1) / this.pageSize)
          }
          // console.log( page)
          this.pageNum = page
        }
      } else {
        this.$message({
          message: '当前属性表暂无数据!',
          type: 'warning'
        })
      }
    },

    changeCId(e) {
      this.setUserLineId({ data: e, jumpMap: true })
    },

    changePage(e) {
      this.pageNum = e
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}
</style>
